//后续研究
<template>
  <div>
    <v-form-render
      :form-json="formJson"
      :form-data="formData"
      :option-data="optionData"
      ref="vFormRef"
    >
    </v-form-render>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  setup() {
    let formJson = ref({
      widgetList: [
        {
          type: "input",
          icon: "text-field",
          formItemFlag: true,
          options: {
            name: "input104803",
            label: "name",
            labelAlign: "",
            type: "text",
            defaultValue: "",
            placeholder: "",
            columnWidth: "200px",
            size: "",
            labelWidth: null,
            labelHidden: false,
            readonly: false,
            disabled: false,
            hidden: false,
            clearable: true,
            showPassword: false,
            required: true,
            requiredHint: "不可空",
            validation: "",
            validationHint: "",
            customClass: [],
            labelIconClass: null,
            labelIconPosition: "rear",
            labelTooltip: null,
            minLength: null,
            maxLength: null,
            showWordLimit: false,
            prefixIcon: "",
            suffixIcon: "",
            appendButton: false,
            appendButtonDisabled: false,
            buttonIcon: "el-icon-search",
            onCreated: "",
            onMounted: "",
            onInput: "",
            onChange: "",
            onFocus: "",
            onBlur: "",
            onValidate: "",
          },
          id: "input104803",
        },
        {
          type: "radio",
          icon: "radio-field",
          formItemFlag: true,
          options: {
            name: "radio17904",
            label: "value",
            labelAlign: "",
            defaultValue: 1,
            columnWidth: "200px",
            size: "",
            displayStyle: "inline",
            buttonStyle: false,
            border: false,
            labelWidth: null,
            labelHidden: false,
            disabled: false,
            hidden: false,
            optionItems: [
              { label: "radio 1", value: 1 },
              { label: "radio 2", value: 2 },
              { label: "radio 3", value: 3 },
            ],
            required: true,
            requiredHint: "不可空",
            validation: "",
            validationHint: "",
            customClass: "",
            labelIconClass: null,
            labelIconPosition: "rear",
            labelTooltip: null,
            onCreated: "",
            onMounted: "",
            onChange: "",
            onValidate: "",
          },
          id: "radio17904",
        },
        {
          type: "select",
          icon: "select-field",
          formItemFlag: true,
          options: {
            name: "select107778",
            label: "label",
            labelAlign: "",
            defaultValue: "",
            placeholder: "",
            columnWidth: "200px",
            size: "",
            labelWidth: null,
            labelHidden: false,
            disabled: false,
            hidden: false,
            clearable: true,
            filterable: true,
            allowCreate: false,
            remote: false,
            automaticDropdown: false,
            multiple: false,
            multipleLimit: 0,
            optionItems: [
              { label: "select 1", value: 1 },
              { label: "select 2", value: 2 },
              { label: "select 3", value: 3 },
            ],
            required: true,
            requiredHint: "不可空",
            validation: "",
            validationHint: "",
            customClass: "",
            labelIconClass: null,
            labelIconPosition: "rear",
            labelTooltip: null,
            onCreated: "",
            onMounted: "",
            onRemoteQuery: "",
            onChange: "",
            onFocus: "",
            onBlur: "",
            onValidate: "",
          },
          id: "select107778",
        },
      ],
      formConfig: {
        modelName: "formData",
        refName: "vForm",
        rulesName: "rules",
        labelWidth: 80,
        labelPosition: "left",
        size: "",
        labelAlign: "label-left-align",
        cssCode: "",
        customClass: "",
        functions: "",
        layoutType: "PC",
        onFormCreated: "",
        onFormMounted: "",
        onFormDataChange: "",
      },
    });
    let formData = ref({});
    let optionData = ref({});

    const submitForm = () => {
      console.log("formJson", formJson.value);
      console.log("formData", formData.value);
      console.log("optionData", optionData.value);
      this.$refs.vFormRef
        .getFormData()
        .then((formData) => {
          alert(JSON.stringify(formData));
        })
        .catch((error) => {
          this.$message.error(error);
        });
    };
    return {
      formJson,
      formData,
      optionData,
      submitForm,
    };
  },
};
</script>
